<template>
  <div class="login-container">
    <div style="display: flex">
      <el-form>
        <el-form-item class="form-box" style="padding-top: 40px;border-radius: 10px">
          <el-form-item>
            <el-input style="margin-bottom: 15px;" size="large" prefix-icon="el-icon-s-custom" placeholder="请输入用户名" v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input style="margin-bottom: 15px" size="large" show-password prefix-icon="el-icon-key" placeholder="请输入密码" v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input style="margin-bottom: 15px" size="large" show-password prefix-icon="el-icon-key" placeholder="请输入确认密码" v-model="form.nmm"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select style="width: 100%;margin-bottom: 15px" size="large"  placeholder="请选择角色" v-model="form.role">
              <el-option value="2" label="用户"></el-option>

            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 100%;height: 50px;background-color: #17bb94;border-color: #17bb94;color:white" size="large" @click="register">注册</el-button>
          </el-form-item>
        </el-form-item>
        <el-form-item style="background-color: #ffffff; border-radius: 10px; display: flex; justify-content: center;align-items: center">
          <el-form-item class="regBox">
            <a href="javascript:void(0)" @click="navLogin" style="text-indent: 12px;">登录</a><span class="el-icon-right"></span>
          </el-form-item>

        </el-form-item>

      </el-form>
    </div>
  </div>
</template>


<script>

import request from "@/utils/request";

export default {
  name: "Register",
  data() {
    return {
      form: {}
    }
  },
  // 页面加载的时候，做一些事情，在created里面
  created() {
  },
  // 定义一些页面上控件出发的事件调用的方法
  methods: {
    // 注册方法
    // register() {
    //   if (this.form.username === "" || this.form.password === "" || this.form.nmm === "") {
    //     this.$notify.error("请输入用户名或密码")
    //     return
    //   }
    //   request.post("user/register".this.form).then(res => {
    //     if (res.code === 0) {
    //       this.$notify.success("注册成功")
    //       this.$router.push("/user")
    //     } else {
    //       this.$message.error(res.message)
    //     }
    //   })
    // },
// 注册按钮点击事件入口
    register() {
      // 页面表单数据的输入校验
      if (!this.form.userName) {
        this.$notify.error("请输入用户名");
        return;
      }
      if (!this.form.password) {
        this.$notify.error("请输入密码");
        return;
      }
      if (this.form.password !== this.form.nmm) {
        this.$notify.error("两次密码输入不一致");
        return;
      }
      if (!this.form.role) {
        this.$notify.error("请选择角色");
        return;
      }
      // 调用后台注册接口
      request.post('/account/register', this.form).then(res => {
        if(res.code === '0') {
          this.$notify.success("注册成功！");
          this.$router.push("/manager/home")
        } else {
          this  .$notify.error(res.msg);
        }
      });
    },


    navLogin() {
      this.$router.push("/login")
    }
  }
}
</script>
<style scoped>
.login-container {
  height: 100vh;
  overflow: hidden;
  background-image: url("@/assets/background_register.png");
  background-size: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-box {
  width: 300px;
  padding: 20px 40px;
  border-radius: 2px;
  background-color: #ffffff;
  opacity: 1;
}
/deep/.el-form-item {
  margin-bottom: 5px;
}
/deep/.el-input__inner {
  border-color: #ccc !important;
  border-radius: 2px;
  background-color: #ffffff !important;
  color: #333;
}
/deep/.el-input__icon {
  color: #666;
}

a {
  text-decoration: none;
  color: #17bb94;
  font-weight: bold;
}
.regBox {
  color: #17bb94;
  font-size: 28px;
  margin-bottom: 10px;
  margin-top: 10px;
  text-align: right;
}
</style>
<!--<template>-->
<!--  <div>-->
<!--    <el-container style="height: 500px;">-->
<!--      &lt;!&ndash;      侧边栏&ndash;&gt;-->
<!--      <el-aside  class="m-aside">-->
<!--        &lt;!&ndash;        logo和系统名称&ndash;&gt;-->
<!--        <div class="m-sysName" >-->
<!--          <img src="@/assets/logo.png" alt="" width="10%">-->
<!--          <span class="m-nameText">亚飞未来科技公司</span>-->
<!--        </div>-->
<!--        &lt;!&ndash;        侧边菜单栏&ndash;&gt;-->
<!--        <el-menu class="el-menu" :default-active="$route.path" router >-->
<!--          <el-submenu index="1">-->
<!--            <template slot="title"><i class="el-icon-user"></i>系统首页</template>-->
<!--            <el-menu-item index="/manager/home">系统首页</el-menu-item>-->
<!--          </el-submenu>-->

<!--          <el-submenu index="2" v-if="user.role === 1" >-->
<!--            <template slot="title"><i class="el-icon-user"></i>用户管理</template>-->
<!--            <el-menu-item index="/manager/Admin">管理员管理</el-menu-item>-->
<!--            <el-menu-item index="/manager/User">用户管理</el-menu-item>-->
<!--          </el-submenu>-->
<!--          <el-submenu index="3">-->
<!--            <template slot="title"><i class="el-icon-news"></i>信息管理</template>-->
<!--            <el-menu-item index="/manager/Grade">部门管理</el-menu-item>-->
<!--            <el-menu-item index="/manager/News">公告管理</el-menu-item>-->
<!--            <el-menu-item index="/manager/activity">活动管理</el-menu-item>-->
<!--            <el-menu-item index="/manager/record">预约管理</el-menu-item>-->
<!--            <el-menu-item index="/manager/takeoff">请假管理</el-menu-item>-->
<!--            <el-menu-item index="/manager/message">留言管理</el-menu-item>-->
<!--          </el-submenu>-->
<!--          <el-menu-item index="/front/Index"><i class="el-icon-back">返回前台</i></el-menu-item>-->
<!--        </el-menu>-->
<!--      </el-aside>-->
<!--      &lt;!&ndash;      右侧&ndash;&gt;-->
<!--      <el-container class="right-container">-->
<!--        &lt;!&ndash;        顶部菜单栏&ndash;&gt;-->
<!--        <el-header class="top-header">-->
<!--          <img :src="user.avatar" alt="" style="width: 40px; height:40px;border-radius: 50%;margin-right: 10px;">-->
<!--          &lt;!&ndash;          //显示当前用户名&ndash;&gt;-->
<!--          <span style="color: #4c5a73;font-weight: bold;font-size: 14px;margin-right: 20px">欢迎您，{{ user.username }}</span>-->
<!--          <el-dropdown>-->
<!--            <i class="el-icon-setting" style="margin-right: 15px"></i>-->
<!--            <el-dropdown-menu slot="dropdown">-->
<!--              <el-dropdown-item>个人中心</el-dropdown-item>-->
<!--              <div @click="logout()"><el-dropdown-item  >退出登录</el-dropdown-item></div>-->
<!--            </el-dropdown-menu>-->
<!--          </el-dropdown>-->

<!--        </el-header>-->
<!--        &lt;!&ndash;表单&ndash;&gt;-->
<!--        <el-main >-->
<!--          <div>-->
<!--            <router-view/>-->
<!--          </div>-->
<!--        </el-main>-->

<!--      </el-container>-->
<!--    </el-container>-->

<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import request from "@/utils/request";-->

<!--export default {-->
<!--  name: "ManagerLayout",-->

<!--  data () {-->
<!--    return {-->
<!--      // 定义User对象，从缓存里取值-->
<!--      user: JSON.parse(localStorage.getItem("user") || {}),-->
<!--    }-->
<!--  },-->


  methods: {
// 退出登录方法
    logout() {
      localStorage.removeItem("user");
      this.$router.push("/login");
    }
  }

}
</script>